<template>
  <div class="parent">
    <div class="child">
      <div class="header">
        <h1 style="color: black;">欢迎登录</h1>
        <div class="wave"></div>
      </div>

      <el-form :model="form" label-width="80px" class="form-container">
        <el-form-item label="用户名" class="form-item">
          <el-input v-model="form.UserName" placeholder="请输入用户名" prefix-icon="User" class="custom-input"></el-input>
        </el-form-item>

        <el-form-item label="密码" class="form-item">
          <el-input v-model="form.Password" show-password placeholder="请输入密码" prefix-icon="Lock"
            class="custom-input"></el-input>
        </el-form-item> 

        <el-form-item label="验证码" class="form-item captcha-item">
          <div class="captcha-container">
            <el-input v-model="form.vcode" placeholder="请输入验证码" class="captcha-input" prefix-icon="Key"></el-input>
            <div class="captcha-box" @click="refreshCaptcha">
              <canvas ref="canvas" :width="width" :height="height"></canvas>
              <div class="refresh-mask">
                <el-icon :size="20" class="refresh-icon">
                  <Refresh />
                </el-icon>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item class="action-item">
          <el-button type="primary" @click="onSubmit" class="login-button" :loading="loading">
            {{ loading ? '登录中...' : '立即登录' }}
          </el-button>
        </el-form-item>
      </el-form>

      <div class="footer">

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">



import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
const router = useRouter();

// 定义组件接收的属性
const props = defineProps({
  width: {
    type: Number,
    default: 120
  },
  height: {
    type: Number,
    default: 40
  },
  length: {
    type: Number,
    default: 4
  }
});

// 获取 canvas 元素的引用
const canvas = ref(null);
// 存储当前验证码文本
const captchaText = ref('');

// 生成随机验证码字符串
const generateCaptcha = () => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let text = '';
  for (let i = 0; i < props.length; i++) {
    text += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  captchaText.value = text;
  return text;
};

// 生成随机颜色
const getRandomColor = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r},${g},${b})`;
};

// 绘制验证码到 canvas 上
const drawCaptcha = () => {
  const ctx = canvas.value.getContext('2d');
  // 清空画布
  ctx.clearRect(0, 0, props.width, props.height);
  // 设置字体和颜色
  ctx.font = '30px Arial';
  ctx.fillStyle = getRandomColor();

  const captcha = generateCaptcha();
  for (let i = 0; i < captcha.length; i++) {
    const x = (props.width / (props.length + 1)) * (i + 1);
    const y = props.height / 2 + Math.random() * 10 - 5;
    // 保存当前绘图状态
    ctx.save();
    // 平移和旋转文本
    ctx.translate(x, y);
    ctx.rotate((Math.random() - 0.5) * (Math.PI / 4));
    // 绘制单个字符
    ctx.fillText(captcha[i], 0, 0);
    // 恢复之前保存的绘图状态
    ctx.restore();
  }

  // 绘制干扰线
  for (let i = 0; i < 5; i++) {
    ctx.beginPath();
    ctx.strokeStyle = getRandomColor();
    ctx.moveTo(Math.random() * props.width, Math.random() * props.height);
    ctx.lineTo(Math.random() * props.width, Math.random() * props.height);
    ctx.stroke();
  }
};

// 刷新验证码
const refreshCaptcha = () => {
  drawCaptcha();
};

// 组件挂载后绘制验证码
onMounted(() => {
  drawCaptcha();
});

// 向外暴露获取验证码文本的方法
const getCaptchaText = () => {
  return captchaText.value;
};

defineExpose({
  getCaptchaText
});

const form = reactive({
  UserName: '',
  Password: '',
  vcode: '' // 验证码
})

const onSubmit = () => {
  // 验证码验证
  if (form.vcode.toLocaleLowerCase() != captchaText.value.toLocaleLowerCase()) {
    console.log(captchaText.value)
    ElMessage.error("验证码不匹配");
    return;
  }
  axios.get("https://localhost:7174/api/Message/Login", {
    params: {
      UserName: form.UserName,
      Password: form.Password
    }
  }).then(res => {
    if (res.data.code == 202) {
      ElMessage.success(res.data.msg)
      store.ccstore.nickName = res.data.data.nickName
      store.ccstore.userId = res.data.data.userId
      store.ccstore.userName = res.data.data.userName
      store.ccstore.depId = res.data.data.depId
      store.ccstore.levelRoleId = res.data.data.levelRoleId
      router.push("/MianView")
      console.log(res.data.data.nickName)
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}

const onSubmits = () => {
  router.push("/MianView")
}

const loading = ref(false);
</script>



<style scoped>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0543a1 0%, #1b087d 100%);
  position: relative;
  overflow: hidden;
}
.child {
  background: rgba(13, 187, 250, 0.95);
  padding: 40px 50px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 480px;
  transform: translateY(0);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.child:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.title {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

.title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #409eff;
  border-radius: 2px;
}

.form-container {
  margin-top: 20px;
}

.form-item:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

.custom-input:deep(.el-input__inner) {
  height: 48px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-input:deep(.el-input__inner):focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.captcha-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.captcha-input {
  flex: 1;
}

.captcha-box {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #7eaa0e;
}

.captcha-box:hover {
  border-color: #409eff;
}

.captcha-box:hover .refresh-mask {
  opacity: 1;
}

.refresh-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(64, 158, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.refresh-icon {
  color: rgb(17, 31, 218);
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.login-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.login-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
}

.footer {
  margin-top: 30px;
  text-align: center;
  color: #56be0b;
}

.tip a {
  color: #409eff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.tip a:hover {
  color: #66b1ff;
}

.wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23409eff" fill-opacity="0.1" d="M0,224L48,213.3C96,203,192,181,288,160C384,139,480,117,576,128C672,139,768,181,864,181.3C960,181,1056,139,1152,122.7C1248,107,1344,117,1392,122.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>');
  background-size: cover;
  opacity: 0.3;
}
</style>
